<template>
  <div class="base-header">
    <h1 class="base-header__title">后台管理系统</h1>
    <div class="base-header__right">
      <h1 class="base-header__info">{{ userMobileNo }},{{ userRoleName }}</h1>
      <p class="base-header__logout" @click="logout()">退出</p>
    </div>
  </div>
</template>

<script>
import { removeCookie } from '@/utils/utils.js'
export default {
  name: 'BaseHeader',
  watch: {
    '$route.name': function () {
      return this.getUserInfo()
    },
  },
  data() {
    return {
      userMobileNo: '',
      userRoleName: '',
    }
  },
  computed: {},
  methods: {
    async getUserInfo() {
      const res = await this.$http.get('/users/info')
      this.userMobileNo = res.loginAccount
      this.userRoleName = res.tenantName
    },
    logout() {
      this.$router.push({ name: 'Login' })
      removeCookie('Authorization')
      this.$store.commit('setAccessCode', [])
      this.$store.commit('setRouterList', [])
    },
  },
  mounted() {
    this.getUserInfo()
  },
}
</script>

<style lang="scss" scoped>
.base-header {
  @include flex-space-between();
  text-align: right;
  &__right {
    @include flex-right();
  }
  &__title,
  &__info {
    color: $white;
    font-size: $f-s-24;
    margin-right: 20px;
  }
  &__info {
    font-size: $f-s-16;
  }
  &__logout {
    cursor: pointer;
    color: $white;
    font-size: $f-s-14;
  }
}
</style>
